<template>
  <div class="app-container">
    <el-form v-model="schemeModel" label-width="80px">
        <el-form-item prop="name" label="方案名字">
          <el-input v-model="schemeModel.name" icon="search" name="title" placeholder="请输入方案名字"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="方案app" label-width="80px">
          <el-checkbox-group  v-model="selectApps" class="checkgroup" >
              <el-checkbox v-for="app in apps"  :key="app.oid" :label="app.oid" >{{app.name}}</el-checkbox>
             </el-checkbox-group>
        </el-form-item>
        <el-form-item prop="name" label="方案课程" label-width="80px">
             <el-checkbox-group v-model="selectCourse">
              <el-checkbox v-for="course in courses" :label="course.oid" :key="course.oid">{{course.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
      </el-form>
       <el-button type="primary" @click="schemeAdd(true)" style="margin-top: 8px;margin-left: 20px;">确定</el-button>
       <el-button type="primary" v-show="!id" @click="schemeAdd(false)" style="margin-top: 8px;margin-left: 20px;">添加下一个</el-button>
  </div>
</template>

<script>
import api from "@/api/configure";
import { cloneDeep, defaultsDeep } from "lodash";

const defaultSchemeModel = {
  apps: [],
  courses: [],
  name: ""
};
export default {
  data() {
    return {
      apps: [],
      courses: [],
      schemeModel: cloneDeep(defaultSchemeModel),
      selectApps: [],
      selectCourse: []
    };
  },
  mounted() {
    api.appGet().then(response => {
      this.apps = response;
    });
    api.courseGet().then(response => {
      this.courses = response.content;
    });
    if (this.id) this.schemeIdFun();
  },
  computed: {
    id() {
      return this.$route.query.oid;
    }
  },
  methods: {
    schemeIdFun() {
      api.schemeId(this.id).then(response => {
        response.apps.map((item, index) => {
          this.selectApps.push(item.oid);
        });
        response.courses.map((item, index) => {
          this.selectCourse.push(item.oid);
        });
        this.schemeModel = response;
      });
    },
    schemeAdd(from) {
      this.schemeModel.apps = [];
      this.selectApps.forEach(item => {
        this.schemeModel.apps.push({ oid: item });
      });
      this.schemeModel.courses = [];
      this.selectCourse.forEach(item => {
        this.schemeModel.courses.push({ oid: item });
      });
      api.schemeEdit(this.schemeModel).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "添加成功！",
          type: "success"
        });
        if (from) {
          this.$router.push("/configure");
        } else {
          this.schemeModel = cloneDeep(defaultSchemeModel);
          this.selectApps = [];
          this.selectCourse = [];
        }
      });
    }
  }
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
#upClass {
  width: 420px;
  height: 35px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
